<template>
  <div class="user-settings">
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>通知设置</span>
        </div>
      </template>
      <el-form
        ref="notificationForm"
        :model="notificationSettings"
        label-width="120px"
      >
        <el-form-item label="系统通知">
          <el-switch v-model="notificationSettings.systemNotice" />
          <span class="setting-desc">接收系统更新、维护等重要通知</span>
        </el-form-item>

        <el-form-item label="订单通知">
          <el-switch v-model="notificationSettings.orderNotice" />
          <span class="setting-desc">接收订单状态变更、发货等通知</span>
        </el-form-item>

        <el-form-item label="评论通知">
          <el-switch v-model="notificationSettings.commentNotice" />
          <span class="setting-desc">接收他人对您的帖子或评论的回复</span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveNotificationSettings">
            保存设置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>隐私设置</span>
        </div>
      </template>
      <el-form
        ref="privacyForm"
        :model="privacySettings"
        label-width="120px"
      >
        <el-form-item label="个人信息可见">
          <el-select v-model="privacySettings.profileVisibility" style="width: 200px">
            <el-option label="所有人可见" value="public" />
            <el-option label="仅关注者可见" value="followers" />
            <el-option label="仅自己可见" value="private" />
          </el-select>
        </el-form-item>

        <el-form-item label="订单记录可见">
          <el-select v-model="privacySettings.orderVisibility" style="width: 200px">
            <el-option label="所有人可见" value="public" />
            <el-option label="仅自己可见" value="private" />
          </el-select>
        </el-form-item>

        <el-form-item label="默认匿名发帖">
          <el-switch v-model="privacySettings.defaultAnonymous" />
          <span class="setting-desc">发帖时默认开启匿名模式</span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="savePrivacySettings">
            保存设置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <span>安全设置</span>
        </div>
      </template>
      <el-form
        ref="securityForm"
        :model="securitySettings"
        label-width="120px"
      >
        <el-form-item label="登录验证">
          <el-switch v-model="securitySettings.loginVerification" />
          <span class="setting-desc">开启后登录时需要进行短信验证</span>
        </el-form-item>

        <el-form-item label="异地登录通知">
          <el-switch v-model="securitySettings.loginNotification" />
          <span class="setting-desc">检测到异地登录时发送通知</span>
        </el-form-item>

        <el-form-item label="操作验证">
          <el-switch v-model="securitySettings.operationVerification" />
          <span class="setting-desc">进行敏感操作时需要验证身份</span>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveSecuritySettings">
            保存设置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getUserSettings, updateUserSettings } from '@/api/user/settings'

// 通知设置
const notificationSettings = ref({
  systemNotice: true,
  orderNotice: true,
  commentNotice: true
})

// 隐私设置
const privacySettings = ref({
  profileVisibility: 'public',
  orderVisibility: 'private',
  defaultAnonymous: false
})

// 安全设置
const securitySettings = ref({
  loginVerification: false,
  loginNotification: true,
  operationVerification: true
})

// 获取用户设置
const getUserSettingsInfo = async () => {
  try {
    const res = await getUserSettings()
    if (res.code === 200) {
      const { notification, privacy, security } = res.data
      Object.assign(notificationSettings.value, notification)
      Object.assign(privacySettings.value, privacy)
      Object.assign(securitySettings.value, security)
    }
  } catch (error) {
    console.error('获取用户设置失败:', error)
    ElMessage.error('获取用户设置失败')
  }
}

// 保存通知设置
const saveNotificationSettings = async () => {
  try {
    const res = await updateUserSettings({
      type: 'notification',
      settings: notificationSettings.value
    })
    if (res.code === 200) {
      ElMessage.success('保存成功')
    }
  } catch (error) {
    console.error('保存设置失败:', error)
    ElMessage.error('保存失败')
  }
}

// 保存隐私设置
const savePrivacySettings = async () => {
  try {
    const res = await updateUserSettings({
      type: 'privacy',
      settings: privacySettings.value
    })
    if (res.code === 200) {
      ElMessage.success('保存成功')
    }
  } catch (error) {
    console.error('保存设置失败:', error)
    ElMessage.error('保存失败')
  }
}

// 保存安全设置
const saveSecuritySettings = async () => {
  try {
    const res = await updateUserSettings({
      type: 'security',
      settings: securitySettings.value
    })
    if (res.code === 200) {
      ElMessage.success('保存成功')
    }
  } catch (error) {
    console.error('保存设置失败:', error)
    ElMessage.error('保存失败')
  }
}

onMounted(() => {
  getUserSettingsInfo()
})
</script>

<style lang="scss" scoped>
.user-settings {
  padding: 20px;

  .settings-card {
    margin-bottom: 20px;

    .card-header {
      font-weight: bold;
    }

    .setting-desc {
      margin-left: 10px;
      color: #666;
      font-size: 14px;
    }

    :deep(.el-form-item) {
      margin-bottom: 30px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
</style> 